<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Access features with pointer events - 4.9</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #info {
      background-color: black;
      opacity: 0.75;
      color: orange;
      font-size: 18pt;
      padding: 8px;
      visibility: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/Graphic"
    ], function (
      Map,
      MapView,
      FeatureLayer, GraphicsLayer, Graphic
    ) {

      const Layerf = new FeatureLayer({
        url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
        outFields: ["*"]
      });

      const map = new Map({
        basemap: "osm",
        layers: [Layerf]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [112.57, 38],
        highlightOptions: {
          color: "blue"
        }
      });

      view.ui.add("info", "top-right");

      view.on("click", function (event) {
        view.hitTest(event)
          .then(getGraphics);
        console.log(event);
      });

      function getGraphics(response) {
        if (response.results.length) {
          const graphic = response.results.filter(function (result) {
            return result.graphic.layer === Layerf;
          })[0].graphic;
          console.log(graphic);

          view.graphics.removeAll();
          const selectedGraphic = new Graphic({
            geometry: graphic.geometry,
            symbol: {
              type: "simple-marker",
              style: "circle",
              color: "orange",
              size: "12px", // pixels
              outline: { // autocasts as new SimpleLineSymbol()
                color: [255, 255, 0],
                width: 2 // points
              }
            }
          });
          view.graphics.add(selectedGraphic);
        }
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="info">
    <span id="name"></span>
    <br>
    <span id="catalogy"></span>
    <br>
    <span id="location"></span>
  </div>
</body>

</html>







<!-- 


.renderer = {
  type: "heatmap",
  field: "crime_count",
  colorStops: [
    { ratio: 0, color: "rgba(255, 255, 255, 0)" },
    { ratio: 0.2, color: "rgba(255, 255, 255, 1)" },
    { ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
    { ratio: 0.8, color: "rgba(255, 140, 0, 1)" },
    { ratio: 1, color: "rgba(255, 0, 0, 1)" }
  ],
  minPixelIntensity: 0,
  maxPixelIntensity: 5000
}; -->